<template>
	<view class="news-container u-f">
		<!-- 自定义导航 -->
		<newsNavBar :tabbar="tabbar" v-model:isguanzhu="isguanzhu" @change-tab="changeTab" ref="newNavBarRef"></newsNavBar>
		<swiper class="swiper__list" :current-item-id="isguanzhu"  @change="changeSwiper">
			<swiper-item v-for="(item,index) in 2" :key="index" :item-id="tabbar[index].id">
				<template v-if="index==0">
					<scroll-view :scroll-y="true" style="height: 100%;" @scrolltolower="scollBottom(index)">
						<!-- 关注 -->
						<commonList v-for="(item2,index1) in newList.list" :item="item2" :key="index1"/>
						<!-- 上拉加载 -->
						<loadMore :loadingText="newList.loadingText"></loadMore>
					</scroll-view>
				</template>
				<template v-else>
					<scroll-view :scroll-y="true" style="height: 100%;" @scrolltolower="scollBottom(index)">
						<!-- 搜索框 -->
						<view class="u-f-ac u-f-juc search">
							<input type="text"  class="uni-input" placeholder-class="icon iconfont icon-bofang1 search-active" placeholder="请输入搜索"/>
						</view>
						<!-- 轮播图 -->
						<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" circular>
							<swiper-item v-for="item in 3"  class="topic__swiper">
								<image src="/static/new.jpg" mode="widthFix"></image>
							</swiper-item>
							
						</swiper>
						<!-- 热门分类 -->
						<topicNav :classify="classify"/>
						<!-- 最近更新 -->
						<view class="renew">
							<view class="renew__title">{{renew.title}}</view>
							<topicList :item="item"  v-for="(item,index) in renew.list" :key="index"/>
						</view>
						
					</scroll-view>
				</template>
			</swiper-item>
			
		</swiper>
	</view>
</template>

<script setup>
	import commonList from '../../component/common/comm-list.vue';
	import newsNavBar from '../../component/common/news/news-nav-bar.vue';
	import loadMore from '../../component/common/load-more.vue';
	import topicNav from '../../component/common/news/topic-nav.vue';
	import topicList from '../../component/common/news/topic-list.vue'
	import { reactive,onMounted,ref} from "vue";
	import user from '../../common/user.js'
	import {getTopicClass,getHotTopicApi} from '../../api/topicApi.js';
	import {getPostListPage} from '../../api/postApi.js';
	
	const tabbar = ref([{
		text:"关注",
		id:"guanzhu",
	},{
		text:"话题",
		id:"huati",
	}
	]);
	
	// 分类
	const classify = reactive({
		list:[],
		title:"热门分类",
	})
	
	// 最近更新
	const renew = reactive({
		title:"最近更新",
		page:1,
		flag:false,
		list:[],
		loadingText:"上拉加载更多",
	})
	
	
	const newNavBarRef = ref()
	// 页面数据
	const newList = reactive(
		{
			loadingText:"上拉加载更多",
			list:[],
			page:1,
			flag:false,
		});
	
	
	const isguanzhu = ref('guanzhu');
	
	function changeTab(e){
		if(e=="huati"){
			console.log(e)
			getHotTopic()
		}
	}
	// swiper改变事件
	function changeSwiper(e){
		isguanzhu.value = e.detail.currentItemId;
		newNavBarRef.value.switchLine(isguanzhu.value);
		if(e.detail.currentItemId=="huati"){
			console.log(e.detail.currentItemId)
			getHotTopic()
		}
		
	}
	
	// 上拉加载
	function scollBottom(index){
		// 判断是否在加载
		if(index==0){
			if(newList.loadingText!="上拉加载更多")return;
			newList.loadingText = "加载中~~";
			getPost(true)
		}
	}
	
	function getPost(isLoading){
		if(isLoading){
			getPostListPage(++newList.page,1).then(res=>{
				newList.list.push(...res)
				if(res.length<3){
				newList.loadingText="没有更多数据了"
				}else {
					
				newList.loadingText="上拉加载更多"
				}
			}).catch(e=>{
				newList.loadingText="上拉加载更多"
			})
		}else {
			if(!newList.flag){
				getPostListPage(newList.page,1).then(res=>{
					newList.flag=true;
					newList.list.push(...res)
					console.log(res)
				})
			}
		}
		
	}
	
	function getHotTopic(isLoading){
		if(isLoading){
			getHotTopicApi().then(res=>{
				renew.list.push(...res)
			})
		}else {
			if(!renew.flag){
				getHotTopicApi().then(res=>{
					renew.flag=true;
					renew.list.push(...res)
					console.log(res)
				})
			}
		}
		
	}
	
	onMounted(()=>{
		getTopicClass().then(res => {
			classify.list.push(...res);
			console.log(res)
		})
		getPost()
	})
	
</script>

<style scoped lang="scss">
	.news-container {
		width: 100%;
		height: 100%;
		flex-direction: column;
	}
	
	.swiper__list {
		flex: 1;
		
	}
	
	.search {
		box-sizing: border-box;
	
		width: 100%;
		padding: 0 30upx;
		input {
			flex: 1;
			padding: 20upx 10upx;		
			background-color: #f4f4f4;
			
			font-size: 27upx;
			&::-webkit-input-placeholder{
				text-align: center;
			}
			
		}
		
		.search-active {
			display: flex;
			justify-content: center;
			align-items: center;
		}
		
	}
	
	.topic__swiper {
		width:100%;
		box-sizing: border-box;
		padding: 20upx;
		
		&>image {
			width: 100%;
			border-radius: 10upx;
		}
	}
	
	.renew {
		display: flex;
		flex-direction: column;
		padding: 30upx 0upx;
		&__title{
			font-size: 40upx;
			font-weight: 600;
			margin-bottom: 10upx;
			margin-left: 20upx;
		}
	}
	

</style>
